<!--
 * @Author: your name
 * @Date: 2020-12-30 09:51:05
 * @LastEditTime: 2020-12-30 11:24:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\data\table1.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原始表格</title>
    <style>
        table{
            width: 80vw;
            border: 1px solid #cccccc;
            border-collapse:collapse;
            cursor: pointer;
        }
        table caption{
            background: black;
            color: white;
            padding: 10px;
            caption-side: top;
        }
        table tr,th{
            border: 1px solid #cccccc;
        }
        table tr td{
            border: 1px solid #cccccc;
            text-align: center;
            vertical-align: middle;
        }
        /* table tr{
            background-color: #ecf0f1;
            height: 100px;
        }
        table tr:hover{
            background-color: #95a5a6;
            color: #ffffff;
        } */

        /*
            颜色设置
            为表格设置颜色与普通标签相似,可以为table|thead|tbody|caption|tfoot|tr|td 设置颜色颜色样式
        */
        table tr{
            color: rgb(160, 108, 108);
        }
        /*
            隔行换色
            odd 奇数
            even 偶数
        */
        table tbody tr:nth-child(even){
            background: rgb(207, 216, 130);
        }

        table tbody tr:nth-child(odd){
            background: rgb(170, 162, 162);
        }

        table thead{
            background: rgb(174, 223, 167);
        }
        table thead th:first-child{
            background: rgb(223, 30, 30);
        }
        table thead th:nth-child(2){
            background: rgb(73, 82, 207);
        }
        table thead th:nth-child(3){
            background: rgb(189, 21, 147);
        }
                
       
    </style>
</head>
<body>
    <table class="mytable">
        <caption>后盾人线上视频教程</caption>
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>家庭住址</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>2</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>3</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>3</td>
                <td>12</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>